<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="static/js/axios.min.js"></script>
		<style type="text/css">
			#shou{
				height: 200px;
				width: 490px;
				
				margin-left: 100px;
				text-align: left;
				margin-top: 40px;
			}
			#pei{
				margin-left: 100px;
				text-align: left;
				margin-top: 40px;
			}
			#zhi{
				margin-left: 100px;
				text-align: left;
				margin-top: 40px;
			}
			#que{
				margin-left: 600px;
			}
			body{
				/* background:url("img/z0.png") center/cover; */
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-attachment: fixed;
			}
			span{
				font-size: 1px;
				font-family: "楷体";
			}
			#a1{
				width: 800px;
			}
			#a2{
				width: 300px;
			}
			#c3{
				line-height: 30px;
			}
		</style>
	</head>
	<body id="d1">
		<img src="static/image/Logo.png" >
		<h4>1.收货信息</h4>
		<hr >
		<div id="shou">
			<table id="c3">
				<tr>
					<td>收货人姓名：</td>
					<td><input  id="name" type="text" /></td>
					<td><span>*收货人姓名</span></td>
				</tr>
				<tr>
					<td>收货地址：</td>
					<td><select id="province" onchange="myChange()"></select>
				<select id="cities"></select></td>
					<td><span id="address">*收货人详细地址</span></td>
				</tr>
				<tr>
					<td>邮政编码：</td>
					<td><input  id="mail" type="text" /></td>
					<td><span> *所在地区的邮政编码，非必填</span></td>
				</tr>
				<tr>
					<td>手机号码：</td>
					<td><input id="phone" type="text" /></td>
					<td><span>*收货人的手机号码</span></td>
				</tr>
				<tr>
					<td>商品备注：</td>
					<td><input id="note" type="text" /></td>
					<td><span>*必填</span></td>
				</tr>
			</table>
		</div>
	<h4>2.支付方式</h4>
	<hr >
	<div id="zhi">
		<table id="a1">
			<tr>
				<td><input id="r1" type="radio" name="s1" />货到付款<span>手续费：0.00</span></td>
				<td><input id="r2" type="radio" name="s1" />余额支付<span>手续费：0.00</span></td>
				<td><input id="r3" type="radio" name="s1" />支付宝<span>手续费：0.00</span></td>
				<td><input id="r4" type="radio" name="s1" />微信<span>手续费：0.00</span></td>
			</tr>
		</table>
	</div>
	<h4>3.配送方式</h4>
	<hr >
	<div id="pei">
		<table id="a2">
			<tr>
				<td><input id="f1" type="radio" name="s2" />顺丰快递</td>
				<td><input id="f2" type="radio"  name="s2" />韵达快递</td>
			</tr>
		</table>
	</div>
	<h4>4.确认提交</h4>
	<hr >
	<div id="que">
		<button type="button">确认提交</button>
	</div>
	</body>
	<script type="text/javascript">
		 //数组怎么写?
		    //类型不限制
		    //长度不限制
		    //数组可以是字符串
		    var provinces=[]
		    //城市
		    provinces["黑龙江省"]=["哈尔滨","鸡西","大庆"]
		    provinces["湖南省"]=["长沙","怀化","永州"]
		    provinces["广西省"]=["南宁","柳州"]
		
		
		    //省份怎么来
		    //  for of 相当于foreach 遍历元素
		    //  for in 遍历下标
		    for(let i in provinces){
		        //往省份的下拉框中添加选项
		        //<option value="i">i</option>
		        province.appendChild(new Option(i,i))
		    }
		
		    //城市里面放谁?
		    function setCity(name) {
		        for(let i of provinces[name]){
		            cities.appendChild(new Option(i,i))
		        }
		    }
		
		    setCity(province.value)
		
		    function myChange() {
		        //清空原来的选项
		        cities.innerHTML=""
		        //输入框 和 下拉框
		        setCity(province.value)
		    }
			
			// var b=1;
			// //箭头函数
			// setInterval(()=>{
			// 	//操作元素（html）的css
			// 	d1.style.backgroundImage='url("img/z'+(b%5)+'.png")'
			// 	b++;
			// },1000)

			document.querySelector('button').addEventListener('click', function(e){
				const name = document.querySelector('#name').value
				const mail = document.querySelector('#mail').value
				const phone = document.querySelector('#phone').value
				const note = document.querySelector('#note').value

				var provinceSelect = document.getElementById("province");
				var selectedProvince = provinceSelect.value;

				var citiesSelect = document.getElementById("cities");
				var selectedCity = citiesSelect.value;
				const address = selectedProvince + selectedCity
				
				var payment = 0
				var delivery = 0
				// 获取单选按钮的引用
				var radio1 = document.getElementById("r1");
				var radio2 = document.getElementById("r2");
				var radio3 = document.getElementById("r3");
				var radio4 = document.getElementById("r4");

				var f1 = document.getElementById("f1");
				var f2 = document.getElementById("f2");

				if(f1.checked){
					delivery = 0
				}else if(f2.checked){
					delivery = 1
				}

				// 检查单选按钮是否被选中
				if (radio1.checked) {
				// 单选按钮1被选中payment
				payment = 0
				} else if (radio2.checked) {
					payment = 1
				} else if (radio3.checked) {
					payment = 2
				} else if (radio4.checked) {
					payment = 3
				} else {
					payment = 0
				}


				axios({
					url: 'http://localhost:8080/snack-sale/purchase',
					method: 'POST',
					data: {
						name,
						address,
						mail,
						phone,
						note,
						payment,
						delivery
					}
				}).then(result => {
					console.log(result)
				});

				const cart = localStorage.getItem('cart');
				const data = JSON.parse(cart);
				// 将对象转换为数组
				var dataArray = Array.from(data);
				console.log(dataArray)

				dataArray.forEach(item => {
                	const {imgUrl, proName, proPrice} = item
					axios({
						url: 'http://localhost:8080/snack-sale/detail',
						method: 'POST',
						data: {
							imgUrl,
							proName,
							proPrice
						}
					}).then(result => {
						console.log(result)
					})
				});

				localStorage.removeItem('cart')
				//window.location.href='index.html'
			});
	</script>
</html>

